<template>
  <div class="publicpageview">
    <div :class="!isSearch ? 'publicformview-new' : 'publicformview-new-gaoji'">
      <el-form :inline="true" :model="listQuery" size="mini" ref="searchForm" label-width="140px">
        <div :class="!isSearch ? 'publicformview-new-left' : 'publicformview-new-left-gaoji'">

          <el-form-item label="区房屋管理单位：" prop="dname">
            <el-select :disabled='isluru' clearable v-model="listQuery.dname" @change='areaChange'>
              <div v-for="(item,index) in areaList" :key="index">
                <el-option :label="item.dname" :value="item.did" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="管理部(分中心)：" prop="manageDepartment">
            <el-select :disabled='isluru' clearable v-model="listQuery.manageDepartment" @change='HouseChange'>
              <div v-for="(item,index) in HouseList" :key="index">

                <el-option :label="item.aname" :value="item.aid" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="管片：" prop="groupNew">
            <el-select clearable v-model="listQuery.groupNew">
              <div v-for="(item,index) in guanpianList" :key="index">
                <el-option :label="item.groupnew" :value="item.groupnew" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="所号：" prop="blockno">
            <el-select clearable v-model="listQuery.blockno">
              <div v-for="(item,index) in blList" :key="index">
                <el-option :label="item.blockno" :value="item.blockno" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="门号：" prop="BuildingDoorNo">
            <el-input v-model="listQuery.BuildingDoorNo"></el-input>
          </el-form-item>
          <el-form-item label="楼层：" prop="FloorNo">
            <el-input v-model="listQuery.FloorNo"></el-input>
          </el-form-item>
          <el-form-item label="性质：" prop="LivingWay">
            <el-select clearable v-model="listQuery.LivingWay" @change="xinzhiChange">
              <div v-for="(item,index) in xingzhiList" :key="index">
                <el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="用途：" prop="use">
            <el-input v-model="listQuery.use"></el-input>
          </el-form-item>
          <el-form-item label="地址：" prop="address">
            <el-input v-model="listQuery.address"></el-input>
          </el-form-item>
          <el-form-item label="产别：" prop="OwnWay">
            <el-input v-model="listQuery.OwnWay"></el-input>
          </el-form-item>
          <el-form-item label="计租：" prop="RentFlag">
            <el-select clearable v-model="listQuery.RentFlag">
              <el-option label="是" value="1" key="1"></el-option>
              <el-option label="否" value="0" key="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="自然间：" prop="RoomFlag">
            <el-select clearable v-model="listQuery.RoomFlag">
              <el-option label="是" value="1" key="1"></el-option>
              <el-option label="否" value="0" key="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房屋结构：" prop="Structure">
            <el-input v-model="listQuery.Structure"></el-input>
          </el-form-item>
          <el-form-item label="管理形式：" prop="manageway">
            <el-input v-model="listQuery.manageway"></el-input>
          </el-form-item>
          <el-form-item label="建筑形式：" prop="BuildingForm">
            <el-input v-model="listQuery.BuildingForm"></el-input>
          </el-form-item>
          <el-form-item label="建造年份：" prop="BuildYear">
            <el-input v-model="listQuery.BuildYear"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div :class="!isSearch ? 'publicformview-new-right' : 'publicformview-new-right-gaoji'">
        <el-button size="mini" type="primary" @click="sumbitCx">查询</el-button>
        <el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
        <el-button size="mini" type="primary" @click="isSearch = !isSearch">{{!isSearch?'高级搜索':'关闭搜索'}}</el-button>
      </div>

    </div>

    <div class="publitableview">
      <el-button type="primary" size="mini" @click="handleUpdate">导出</el-button>
      <el-table max-height='500px' v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">

        <el-table-column align="center" label="自然间数" prop="roomFlagCount">
        </el-table-column>

        <el-table-column align="center" label="总间数" prop="roomCount">
        </el-table-column>

        <el-table-column align="center" label="总使用面积" prop="usingArea">
        </el-table-column>

        <el-table-column align="center" label="总建筑面积" prop="buildingArea">
        </el-table-column>

        <el-table-column align="center" label="总计租面积" prop="rentArea">
        </el-table-column>

        <el-table-column align="center" label="总原值" prop="oldValue">
        </el-table-column>

        <el-table-column align="center" label="总现值" prop="nowValue">
        </el-table-column>

        <!-- <el-table-column align="center" label="操作" width="280">
					<template slot-scope="scope">
						<el-button type="text" size="mini" @click="handleDayin(scope.row)">详情</el-button>
					</template>
				</el-table-column> -->
      </el-table>

      <div class="publicpaginationview">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
      </div>
    </div>

    <el-dialog title="详情" :visible.sync="isXiangqing" width="70%" :before-close="handleClose" style="margin-top: 100px;">
      <el-table max-height='500px' v-loading="listLoading" :data="detailQuery" border fit highlight-current-row size="mini">

        <el-table-column align="center" label="自然间数" prop="roomFlagCount">
        </el-table-column>

        <el-table-column align="center" label="总间数" prop="roomCount">
        </el-table-column>

        <el-table-column align="center" label="总使用面积" prop="usingArea">
        </el-table-column>

        <el-table-column align="center" label="总建筑面积" prop="buildingArea">
        </el-table-column>

        <el-table-column align="center" label="总计租面积" prop="rentArea">
        </el-table-column>

        <el-table-column align="center" label="总原值" prop="oldValue">
        </el-table-column>

        <el-table-column align="center" label="总现值" prop="nowValue">
        </el-table-column>

      </el-table>
      <div style="height: 40px;"></div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import * as XLSX from 'xlsx'
import {
  blockList,
  getArea,
  getHouseAdmin,
  blockGroupList,
  allRoomData
} from '@/api/industry'
export default {
  name: 'AccommodationManagementGonglingguanli',

  data() {
    return {
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        AID: '',
        blockno: '',
        DID: '',
        groupNew: '',
        BuildingDoorNo: '',
        FloorNo: '',
        LivingWay: '',
        use: '',
        address: '',
        OwnWay: '',
        RentFlag: '',
        RoomFlag: '',
        Structure: '',
        manageway: '',
        BuildingForm: '',
        BuildYear: '',
				manageDepartment:'',
				dname:""
      },
      total: 0,
      options: [
        {
          key: '1'
        }
      ],
      list: [],
      listLoading: false,
      formData: {
        userId: '',
        userName: '',
        phone: '',
        deptId: '',
        roleId: '',
        userStatus: '1',
        remarks: ''
      },
      type: '',
      value1: '',
      isSearch: false,
      // 区房屋管理单位
      areaList: [],
      // 根据区获取部门
      HouseList: [],
      // 管片列表
      guanpianList: [],
      blList: [],
      // 性质
      xingzhiList: [],
      // 地段等级
      diduandengjiList: [],
      chanyeList: [],
      detailQuery: [],
      isXiangqing: false,
				isluru:false
    }
  },

  computed: {},

  mounted() {
		if(localStorage.getItem('userHouseAdminId')>0){
			this.listQuery.DID = localStorage.getItem('userDID')
			this.listQuery.dname = localStorage.getItem('userDname')
			this.listQuery.manageDepartment = localStorage.getItem('userHouseAdminName')
				this.listQuery.AID = localStorage.getItem('userHouseAdminId')
			this.isluru = true
		}
		
    // 遍历字典
    this.chanyeList = JSON.parse(localStorage.getItem('chanye'))
    this.chanyeList.forEach((item, index) => {
      if (item.classname == '地段等级') {
        this.xingzhiList = item.classmidList
      }
    })

    this.allRoomData()
    this.getArea()
    this.blockGroupList()
    this.blockList()
  },

  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 选择性质
    xinzhiChange(value) {
      console.log(value)
      this.chanyeList.forEach((item, index) => {
        if (item.classname == '地段等级') {
          item.classmidList.forEach((it, idx) => {
            if (value == '住宅' && it.classmid == '住宅') {
              this.diduandengjiList = it.classdetailList
            } else if (value == '非住宅' && it.classmid == '非住宅') {
              this.diduandengjiList = it.classdetailList
            }
          })
        }
      })
    },
    // 选择区房屋管理
    areaChange(e) {
      if (e) {
        this.listQuery.DID = e
        this.getHouseAdmin(e)
      }
      this.listQuery.AID = ''
    },
    // 根据区获取部门
    HouseChange(e) {
      console.log(e)
      this.listQuery.AID = e
    },
    blockList() {
      let data = {
        limit: 99999,
        page: 1
      }
      blockList(data).then((res) => {
        this.blList = res.data.list
      })
    },
    // 管片列表
    blockGroupList() {
      let data = {
        group: '',
        groupNumber: '',
        houseAdmin: '',
        pageNum: '',
        pageSize: 99999
      }
      this.listLoading = true
      blockGroupList(data).then((res) => {
        this.guanpianList = res.data.list
        this.listLoading = false
      })
    },
    getArea() {
      getArea().then((res) => {
        console.log(res)
        this.areaList = res.data
      })
    },
    getHouseAdmin(e) {
      getHouseAdmin({ DID: e }).then((res) => {
        this.HouseList = res.data
      })
    },
    allRoomData() {
      this.list = []
      allRoomData(this.listQuery).then((res) => {
        console.log(res)
        this.list.push(res.data)
      })
    },
    // 查询
    sumbitCx() {
      this.allRoomData()
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = val
      this.allRoomData()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.allRoomData()
    },

    resetForm(val) {
      console.log('1')
      this.$refs[val].resetFields()
			if(this.isluru == true){
				this.listQuery.DID = localStorage.getItem('userDID')
				this.listQuery.dname = localStorage.getItem('userDname')
				this.listQuery.manageDepartment = localStorage.getItem('userHouseAdminName')
					this.listQuery.AID = localStorage.getItem('userHouseAdminId')
				
			}
    },

    handleAddUser() {
      this.$router.push('chanquanziliaoluru')
    },
    handleUpdate(currentData, type) {
      this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let data = {
            AID: this.listQuery.AID,
            blockno: this.listQuery.blockno,
            DID: this.listQuery.DID,
            groupNew: this.listQuery.groupNew
          }
          allRoomData(data).then((res) => {
            let list = res.data
            let outList = []
            outList[0] = {
              自然间数: res.data.roomFlagCount,
              总间数: res.data.roomCount,
              总使用面积: res.data.usingArea,
              总建筑面积: res.data.buildingArea,
              总计租面积: res.data.rentArea,
              总原值: res.data.oldValue,
              总现值: res.data.nowValue
            }
            // 获取表格数据
            const data = outList
            // 转换数据为工作表
            const worksheet = XLSX.utils.json_to_sheet(data)
            // 创建新的工作簿
            const workbook = XLSX.utils.book_new()
            // 将工作表添加到工作簿
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
            // 导出Excel文件
            XLSX.writeFile(workbook, '房间总汇信息.xlsx')
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消导出'
          })
        })
    },
    handleDayin(row) {
      let list = []
      list.push(row)
      this.detailQuery = list
      this.isXiangqing = true
    }
  }
}
</script>
<style scoped>
.saveContent {
  width: 100%;
  display: flex;
  justify-content: end;
  margin-top: 20px;
  padding-bottom: 20px;
}

.title {
  color: #008c93;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.headButton {
  width: 100%;
  display: flex;
  justify-content: end;
}

.title2 {
  color: #008c93;
  margin-bottom: 20px;
  font-weight: bold;
}

.tianjiaButton {
  border: 2px solid #008c93;
  background-color: #fff;
  color: #008c93;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}
/deep/.el-input__inner {
  width: 130px;
}
/deep/.publicpaginationview .el-input__inner {
  width: 100px;
}
/deep/.publicpaginationview .is-in-pagination .el-input__inner {
  width: 50px;
}
</style>